{% extends 'core/base.html' %}
{% load staticfiles %}

{% block breadcrumb %}
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item">Users</li>
        <li class="breadcrumb-item active">Create New User</li>
{% endblock breadcrumb%}

{% block content %}
<div class="container animated fadeIn">
        <div class="row justify-content-center">
            <div class="col-6">
                <div class="card-group">
                    <div class="card p-4 mb-5">
                        <div class="card-body">
                            {% if created %}
                              <div class="alert alert-success alert-dismissible fade show" role="alert">
                                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                  </button>
                                  Congratulations, a new user was created!
                              </div>
                            {% endif %}
                                {% csrf_token %}
                                <h1>Users</h1>
                                <p class="text-muted">Create users here</p>
                    <form action="" method="post">
                        {% csrf_token %}
                        <div class="form-group">
                            <div class="input-group">
                                {{ form.username }}
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-user"></i></span>
                                </div>
                                {% if form.username.errors %}
                                    <ol>
                                    {% for error in form.username.errors %}
                                        <li><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                    </ol>
                                {% endif %}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                {{ form.first_name }}
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-user"></i></span>
                                </div>
                                {% if form.first_name.errors %}
                                    <ol>
                                    {% for error in form.first_name.errors %}
                                        <li><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                    </ol>
                                {% endif %}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                {{ form.last_name }}
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-user"></i></span>
                                </div>
                                {% if form.last_name.errors %}
                                    <ol>
                                    {% for error in form.last_name.errors %}
                                        <li><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                    </ol>
                                {% endif %}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                {{ form.email }}
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-envelope"></i></span>
                                </div>
                                {% if form.email.errors %}
                                    <ol>
                                    {% for error in form.email.errors %}
                                        <li><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                    </ol>
                                {% endif %}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                {{ form.password1 }}
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-key"></i></span>
                                </div>
                                {% if form.password1.errors %}
                                    <ol>
                                    {% for error in form.password1.errors %}
                                        <li><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                    </ol>
                                {% endif %}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                {{ form.password2 }}
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-key"></i></span>
                                </div>

                            </div>
                            {% if form.password2.errors %}
                                    <ol>
                                    {% for error in form.password2.errors %}
                                        <li><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                    </ol>
                                {% endif %}
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                {{ form.company }}
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-industry"></i></span>
                                </div>
                                {% if form.company.errors %}
                                    <ol>
                                    {% for error in form.company.errors %}
                                        <li><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                    </ol>
                                {% endif %}
                            </div>
                        </div>

                        <div class="">
                            <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
                            <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
                        </div>
                    </form>
                            {{ form.errors }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}